<template>
<a-spin :spinning="!!treeData.loading" tip='数据加载中...' size='large' wrapperClassName='whov'>
  <a-tree v-bind="treeData.options" showLine  :tree-data="treeData.data" class="wd-tree wh" :blockNode="true" v-model:expandedKeys="expandedKeys"
    v-model:checkedKeys="checkedKeys" @check="onSelect" @select="onClick">
    <template #switcherIcon="row">
      <span>
        <svg class="tree-icon-sm icon-sm" aria-hidden="true" v-if="row.expanded">
            <use xlink:href="#iconxiangxia" />
        </svg>
        <svg class="tree-icon-sm icon-sm" aria-hidden="true" v-else>
            <use xlink:href="#iconxiangyou" />
        </svg>
      </span>
    </template>
    <template #title="node">
      <div class="wd-tree-mian" :class="node.status==='1'?'wd-tree-status_through':''">
        <div class="wd-tree-content">
          <span  v-if="treeData.options.fieldNames&&treeData.options.fieldNames.title">{{node[treeData.options.fieldNames.title]}}</span>
          <span  v-else>{{node.title}}</span>
        </div>
        <div class="wd-tree-operation" v-if="treeData.operation">
          <template v-for="(item,index) in treeData.operation" :key="index">
            <i-button :buttonData="changeButtonData(item)" :data="node" @buttonclick="buttonClick" :key="index" v-if="!item.template&&item.isShow!=false"></i-button>
            <slot v-else-if="item.isShow!=false" :name="item.template" :obj="item" :row="node" :index="index"></slot>
          </template>
        </div>
      </div>
    </template>
  </a-tree>
</a-spin>
</template>

<script lang="ts">
import IButton from '../../IButton/src/IButton.vue'
import { computed, defineComponent, PropType, ref, watch } from 'vue'
import { OperationOptionsInterFace, TreeInterFace } from './TreeInterFace'
// import { Tree, Spin } from 'ant-design-vue'
export default defineComponent({
  name: 'wd-tree',
  props: {
    treeData: {
      type: Object as PropType < TreeInterFace < any > >,
      required: true
    }
  },
  setup (props, ctx) {
    const checkedNodeList = ref < {check:string[], checkNode:any[], checkAllList:string[]} >({
      check: [],
      checkAllList: [],
      checkNode: []
    }) // 获取树选中即可
    const expandedKeys = ref < string[] | null >(null) // 默认展开
    // 默认选中
    const selectedKeys = computed(() => {
      return props.treeData.options ? props.treeData.options.selectedKeys : []
    })
    // 默认选中
    const checkedKeys = ref < string[] >([])
    // 点击每一行方法
    const onClick = (keys: any, {
      node
    }: any) => {
      ctx.emit('clickNodeFun', keys, node.dataRef)
    }
    // 复选框选中方法
    const onSelect = (keys: any, node:any) => {
      if (keys.checked) {
        checkedNodeList.value = {
          check: keys.checked,
          checkAllList: [...keys.checked].concat(node.halfCheckedKeys ? [...node.halfCheckedKeys] : []),
          checkNode: node
        }
      } else {
        checkedNodeList.value = {
          check: keys,
          checkAllList: [...keys].concat(node.halfCheckedKeys ? [...node.halfCheckedKeys] : []),
          checkNode: node
        }
      }

      ctx.emit('selectNodeFun', keys, checkedNodeList.value.checkAllList, node)
    }
    const checkTreeValue = () => {
      return checkedNodeList.value
    }
    const settingCheckBox = (values:string[]) => {
      checkedKeys.value = values
      const data = getTreeData(props.treeData.data) || []
      checkedNodeList.value = {
        check: values,
        checkAllList: values,
        checkNode: data.filter(item => item.id === values.find((sitem:string) => sitem === item.id))
      }
    }
    const getTreeData = (list: any[], dataList:any[] = []) => {
      for (let i = 0; i < list.length; i++) {
        const node = list[i]
        dataList.push(list[i])
        if (node.children) {
          getTreeData(node.children, dataList)
        }
      }
      return dataList
    }
    watch(() => props.treeData.data,
      () => {
        // 默认选中数据方法
        if (props.treeData.options.checkedKeys) {
          // 拆解树形数组后,默认选中
          const data = getTreeData(props.treeData.data) || []
          checkedKeys.value = props.treeData.options.checkedKeys
          checkedNodeList.value = {
            check: props.treeData.options.checkedKeys,
            checkAllList: props.treeData.options.checkedKeys,
            checkNode: data.filter(item => item.id === props.treeData.options.checkedKeys.find((sitem:string) => sitem === item.id))
          }
        }
        // 展开全部
        if (props.treeData.options && props.treeData.options.defaultExpandAll) {
          // 拆解树形数组后,默认展开
          const data = getTreeData(props.treeData.data) || []
          expandedKeys.value = data.map(item => item.id) || []
          // checkedNodeList.value = [expandedKeys.value ? expandedKeys.value : [], data]
        }
      }, {
        deep: true
      }
    )
    return {
      settingCheckBox,
      checkedKeys,
      expandedKeys,
      selectedKeys,
      onSelect,
      onClick,
      checkTreeValue,
      checkedNodeList,
      getTreeData
    }
  },
  methods: {
    // 点击操作执行方法
    buttonClick (buttonData: OperationOptionsInterFace, data: any) {
      buttonData.buttonFun && this.handChange(buttonData.buttonFun, data)
    },
    // 整体回调方法
    handChange (fun: string, val: any) { // 按钮方法总返回
      if (fun) {
        this.$emit(fun, val)
      }
    },
    // 配置button组件Fun属性
    changeButtonData (item: any) {
      item.Fun = 'buttonclick'
      item.options = {
        type: 'link'
      }
      return item
    }
  },
  components: {
    // 'a-tree': Tree,
    // 'a-spin': Spin,
    IButton
  }
})
</script>

 <!--<style lang="scss" scoped>

  /deep/ .ant-btn {
   height: auto;
  }

 </style>-->
